<style lang="less" scoped>
    .box{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        img{
            width: 100%;
        }
    }
</style>
<template>
    <div>
        <v-header :title="title">
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div class="box">
                <img v-if="bannerDetail.bannerDetailImg" v-for="item in images" v-lazy="{src:item}" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'bannerDetail',
        data () {
            return {
                title:'',
                bannerId:'',
                bannerDetail:{},
                images:[]
            }
        },
        activated () {
            this.init()
        },
        methods:{
            init(){
                this.bannerDetail = {}
                this.images = []
                this.bannerId = this.$route.query.bannerId
                this.getBannerDetail()
            },
            getBannerDetail(){
                this.$ajax.getBannerDetail({bannerId : this.bannerId})
                    .then((res)=>{
                        this.bannerDetail = res.body.content
                        if(res.body.content.bannerDetailImg){
                            this.images = res.body.content.bannerDetailImg.split(',')
                        }
                        this.title = res.body.content.title
                        this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: res.body.content.title,bannerId: this.$route.query.bannerId || null}})
                    })
            }
        }
    }
</script>